<template>
  <div class="footer_bar">
    <div class="footer_bar_content">
      <p>版权所有：湖南楚才教育管理集团有限公司Copyright ©2020-202 chucaijy.com ALL rights reserved</p>
      <p>网站备案号：湘ICP备20006003号-1</p>
    </div>
    <!-- 相关定位元素 -->
    <a href="#" class="callbacktop el-icon-top" v-if="showlist">返回顶部</a>
    <div class="show_erweima el-icon-s-grid" @click="showerw" v-if="showlist">查看企业公众号</div>
    <div class="show_erweima el-icon-chat-dot-round show_er_qq" @click="openqq" v-if="showlist">QQ联系</div>
    <el-drawer title="扫码关注" size="10%" :visible.sync="drawer" :with-header="false">
      <span>扫码关注</span>
      <img src="../../assets/weixin.jpg" alt />
    </el-drawer>
    <div class="left_nav_box" v-if="showlist">
      <h1>学历提升报考</h1>
      <ul>
        <li @click="showModal">认可度高的院校</li>
        <li @click="showModal">好就业的专业</li>
        <li @click="showModal">报考截止时间</li>
        <li @click="showModal">多久能拿到证书</li>
        <li @click="showModal">需要多少费用</li>
        <li @click="showModal">院校改革政策</li>
      </ul>
      <h2 @click="showModal">免费申请助学金</h2>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      showlist: false
    };
  },
  methods: {
    showerw() {
      this.drawer = true;
    },
    // 启动模态框
    showModal() {
      this.$emit("showModalInGloble", true);
    },
    handleScroll() {
      let scroll = document.documentElement.scrollTop;
      scroll <= 684 ? (this.showlist = false) : (this.showlist = true);
    },
    openqq() {
      var qq = "1159628570"; //获取qq号
      window.open(
        "tencent://message/?Menu=yes&uin=" +
          qq +
          "&Site=80fans&Service=300&sigT=8ea1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a545b1774f9d45",
        "_blank"
      );
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  }
};
</script>

<style lang="less" scoped>
@basesize: 114.3rem;
.setfontsize(@computed) {
  font-size: @computed / @basesize;
}
.footer_bar {
  background-color: #000;
  .footer_bar_content {
    color: #fff;
    padding-top: 20 / @basesize;
    p {
      .setfontsize(16);
      line-height: 30 / @basesize;
    }
  }
  .callbacktop {
    position: fixed;
    width: 100 / @basesize;
    height: 50 / @basesize;
    background-color: #000;
    color: #fff;
    .setfontsize(16);
    right: 40 / @basesize;
    bottom: 0;
    z-index: 9999;
    line-height: 50 / @basesize;
    border-radius: 20 / @basesize;
    &:hover {
      background-color: #ccc;
      color: #000;
    }
  }
  .show_erweima {
    border-radius: 20 / @basesize;
    position: fixed;
    right: 50 / @basesize;
    bottom: 300 / @basesize;
    cursor: pointer;
    border: solid 1px red;
    width: 150 / @basesize;
    height: 50 / @basesize;
    padding: 0 20 / @basesize;
    line-height: 50 / @basesize;
    background-color: #fff;
    .setfontsize(16);
    z-index: 0;
    color: #000;
    &:hover {
      background-color: #2561bc;
      color: #fff;
      border-color: #2561bc;
    }
  }
  .show_er_qq {
    bottom: 240 / @basesize;
  }
  .el-drawer {
    span {
      color: #000;
      .setfontsize(16);
      display: block;
      margin-top: 20 / @basesize;
    }
    img {
      width: 144 / @basesize;
      height: 144 / @basesize;
    }
  }
  .left_nav_box {
    position: fixed;
    left: 0;
    top: 50%;
    width: 170 / @basesize;
    background-color: #5cadad;
    padding: 10 / @basesize;
    transform: translateY(-50%);

    h1 {
      color: #fff;
      font-size: 18 / @basesize;
      padding: 10 / @basesize 0;
    }
    ul {
      background-color: #fff;
      li {
        font-size: 18 / @basesize;
        color: #000;
        line-height: 50 / @basesize;
        cursor: pointer;
        &:hover {
          text-decoration: underline;
        }
      }
    }
    h2 {
      font-size: 16 / @basesize;
      background-color: #ffec18;
      line-height: 40 / @basesize;
      font-weight: 400;
      height: 40 / @basesize;
      margin-top: 20 / @basesize;
      border-radius: 10 / @basesize;
      color: #000;
      &:hover {
        color: #fff;
        background-color: #2561bc;
      }
    }
  }
}
</style>